<template>
  <div class="main-wrap">
    <navigators :back-text="back" :bg-color="bgColor"></navigators>
    <div class="main-banners" :style="{height:heights+'px'}">

      <yd-slider direction="vertical">
        <yd-slider-item>
            <div class="img-ban-pare-con"  :style="{height:heights+'px'}">

              <img src="../assets/images/banner/1.jpg" :style="{height:heights+'px'}"/>

            </div>

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/2.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

          <div class="sliders-con" :style="{height:heights+'px'}" @touchstart="getStart($event)" @touchend="getMove($event)">

            <ul class="slider-list-con">
              <li class="left-arr" @click="showIndex('le')"></li>
              <li class="list-slider" >

                <div class="slider-img-con" v-for="(items,index) in imgArrays" >
                  <img :src="items.urlNew" class="images-src" alt="" />

                </div>

              </li>
              <li class="right-arr" @click="showIndex('ri')"></li>

            </ul>
            <img src="../assets/images/banner/ban03BTxt02.png" alt="" ref="imgs" class="sliders-con-img">

          </div>
        </yd-slider-item>
        <yd-slider-item>
          <div class="img-ban-pare-con01"  :style="{height:heights+'px'}">
             <img src="../assets/images/banner/4.jpg" :style="{height:heights+'px'}">
          </div>
        </yd-slider-item>
        <yd-slider-item >
          <div class="img-pares-container" :style="{height:heights+'px'}">

            <img src="../assets/images/banner/5.jpg" >
          </div>


        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/6.jpg" :style="{height:heights+'px'}">


        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/7.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>
          <div class="sliders-con-btm">

            <yd-slider autoplay="3000" class="yl-slider-con">
              <yd-slider-item>

                  <img src="../assets/images/banner/bg_jw.png" :style="{height:heights*.76+'px'}">

              </yd-slider-item>
              <yd-slider-item>
                <img src="../assets/images/banner/bg_cy.png" :style="{height:heights*.76+'px'}">
              </yd-slider-item>

            </yd-slider>

          </div>
        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/9.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/10.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
      </yd-slider>
    </div>

  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import {method} from '../utils/index'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        startX:0,
        startY:0,
        lefts:0,
        idx:1,
        isShow:false,
        imgArrays:[{
          id:0,
          urlNew:require("../assets/images/banner/banN01.jpg"),
          urlTxt:require("../assets/images/banner/ban03BTxt02.png"),
          isOn:false
        },
          {
            id:1,
            urlNew:require("../assets/images/banner/banN02.jpg"),
            urlTxt:require("../assets/images/banner/ban03BTxt.png"),
            isOn:false
          },
          {
            id:2,
            urlNew:require("../assets/images/banner/banN03.jpg"),
            urlTxt:require("../assets/images/banner/ban03BTxt01.png"),
            isOn:false
          },
          {
            id:3,
            urlNew:require("../assets/images/banner/banN04.jpg"),
            urlTxt:require("../assets/images/banner/ban03BTxt03.png"),
            isOn:false
          }]
      }
    },
    created(){
      // this.checkedIsMobile();
    },

    mounted(){

    },
    updated(){

    },
    methods:{
        checkedIsMobile(){
            window.location.href=method.isMobile() ? "http://www.ontsoft.cn/m" :"http://www.ontsoft.cn";
        },
      getStart(e){
        var vm=this;
        vm.startX = e.changedTouches[0].pageX;
        vm.startY = e.changedTouches[0].pageY;
      },
      getMove(e){

        var vm=this,
            endX = e.changedTouches[0].pageX,
            endY = e.changedTouches[0].pageY,
            disX  = endX - vm.startX,
            disY = endY - vm.startY,
            len=vm.imgArrays.length;
        if(Math.abs(disX) > Math.abs(disY) && disX > 50){

          vm.showIndex("ri");
        }else if(Math.abs(disX) > Math.abs(disY) && disX < -50){

          vm.isShow=vm.idx==len-1 ? true : false;
          vm.showIndex("le");


        }else if(Math.abs(disX) < Math.abs(disY) && disY < -50){
          console.log('往上滑动');
        }else if(Math.abs(disX) < Math.abs(disY) && disY > 50){
          console.log('往下滑动');
        }
      },
      showIndex(type){
       var lists=document.querySelectorAll(".images-src"),

            vm=this,len=vm.imgArrays.length;
            console.log(lists[0].src);

            switch(type){
              case "le":
                vm.idx--;
                if(vm.idx<0) {
                  vm.idx=0;
                }
                this.$refs.imgs.src=vm.imgArrays[vm.idx].urlTxt;
                for(var i=0; i<len;i++){
                  lists[i].src=vm.idx+i ? vm.imgArrays[vm.idx+i].urlNew:vm.imgArrays[0].urlNew;
                }

              break;
              case "ri":
                vm.idx++;
                if(vm.idx>len-1 ) {
                  vm.idx=len-1;
                }
                this.$refs.imgs.src=vm.imgArrays[vm.idx].urlTxt;
                for(var i=0; i<len;i++){
                  lists[i].src=vm.idx+i ? vm.imgArrays[vm.idx-i].urlNew:vm.imgArrays[len-1].urlNew;
                }

              break;
            }


      },
      changeImg(e,i){
          var vm=this;

          vm.imgArrays.forEach((items,index)=>{

            items.isOn = (i==items.id) ?  !items.isOn : false;

          })
      }
    },
    components:{
      navigators
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../css/index.css";
  @import "../css/animate.css";
</style>


